<template>
  <div class="app-tasklist-avatar">
    <el-dropdown
      trigger="click"
      placement="bottom-start"
      @visible-change="show($event, itemcontext)"
    >
      <div>
        <el-tooltip
          class="item mr-n1"
          effect="dark"
          :content="itemcontext.realname ? itemcontext.realname : ''"
          placement="top-start"
          v-if="itemcontext.realname && itemcontext.realname!=0"
        >
          <v-list-item-avatar :color="$util.getColorByPersonName(itemcontext.realname?itemcontext.realname:itemcontext.account)" size="25">
            <span class="white--text">{{
              itemcontext.realname
                ? itemcontext.realname.substr(itemcontext.realname.length - 1)
                : itemcontext.account.substr(itemcontext.account.length - 1)
            }}</span>
          </v-list-item-avatar>
        </el-tooltip>
        <v-list-item-avatar
          color="gray"
          size="23"
          v-else
          :class="['no-avatar', 'mr-n1', changeModel ? 'active' : '']"
        >
          <v-icon
            color="gray darken-1"
            size="18"
            >mdi-account</v-icon
          >
        </v-list-item-avatar>
      </div>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="it in taskTeamMemberMetaShow"
          :key="it.value"
          @click.native="selectMemberChange(it.value)"
        >
          <v-list-item-avatar
            :color="it.label == '无负责人'?'':'#81D4FA'" size="18" :style="{'transform': 'translateY(-1px)','margin-right':'4px','border':it.label == '无负责人'?'1px dashed':''}"
          >
            <v-icon
              v-if="it.label == '无负责人' || !it.label"
              size="16"
              style="transform: translateX(2.5px)"
            >
              mdi-account
            </v-icon>
            <div v-else style="transform: translateY(-1px);">
              <span style="color:white;font-size:1px;">{{
                it.label
                  ? it.label.substr(it.label.length - 1)
                  : it.value.substr(it.value.length - 1)
              }}</span>
            </div>
          </v-list-item-avatar>
          <span>{{ it.label ? it.label : it.value }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script lang="tsx">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch,
  Model,
  Inject,
} from "vue-property-decorator";
import { ControlInterface } from "@/interface/control";
import { Subject, Subscription } from "rxjs";
import { UIActionTool, Util, ViewTool } from "@/utils";
import TaskService from "@service/task/task-service";

@Component({
  components: {},
})
export default class AppTasklistAvatar extends Vue {
  /**
   * 视图通讯对象
   *
   * @type {Subject<ViewState>}
   * @memberof AppProjectList
   */
  @Prop() public viewState!: Subject<ViewState>;

  /**
   * 父组件传递的头像显示状态
   *
   * @type {any}
   * @memberof AppProjectList
   */
  @Prop() public changeModel: any;

  /**
   * 视图状态事件
   *
   * @public
   * @type {(Subscription | undefined)}
   * @memberof AppProjectList
   */
  public viewStateEvent: Subscription | undefined;

  @Prop() public item: any;

  /**
   * 项目团队成员信息
   *
   * @type {any}
   * @memberof AppTasklistAvatar
   */
  @Prop() public taskTeamMemberMetaShow: any;

  /**
   * 全部用户信息
   *
   * @type {any}
   * @memberof AppTaskList
   */
  @Prop() public userslist: any;

  /**
   * 实体服务对象
   *
   * @type {TaskService}
   * @memberof AppTasklistAvatar
   */
  public appEntityService: TaskService = new TaskService();

  /**
   * 任务信息
   *
   * @type {any}
   * @memberof AppTasklistAvatar
   */
  public itemcontext: any = {};

  /**
   * Vue声明周期，组件创建完毕
   *
   * @memberof AppTasklistAvatar
   */
  public created() {
    this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
      if (Object.is(action, "avatar")) {
        this.getTaskAvatar();
      }
    });
  }

  /**
   * 显示状态
   *
   * @param {boolean} visable
   * @param {any} item
   * @memberof AppTasklistAvatar
   */
  public show(visable: boolean, item: any) {
    this.$emit("changeModelStatus", { visable: visable, item: item });
  }

  /**
   * 获取具体头像
   *
   * @memberof AppTasklistAvatar
   */
  public getTaskAvatar() {
    let member: any = {
      account: this.item.assignedto,
      realname: this.item.assignedto,
    };
    for (let i = 0; i < this.userslist.length; i++) {
      if (this.item.assignedto == this.userslist[i].value) {
        Object.assign(member, { account: this.userslist[i].value });
        Object.assign(member, { realname: this.userslist[i].label });
      }
    }
    this.itemcontext = member;
  }


  /**
   * 重新指派人员
   *
   * @param {any} account
   * @memberof AppTasklistAvatar
   */
  public async selectMemberChange(account: any) {
    let context: any = { task: this.item.id };
    let params: any = { assignedTo: account, left: "8", comment: "" };
    let data = {};
    Object.assign(data, params);
    let isloading = true;
    return new Promise((resolve: any, reject: any) => {
      let result: Promise<any>;
      result = this.appEntityService.AssignTo(context, data, isloading);
      result
        .then((response) => {
          if (response.data) {
            // 调用 重新获取task数据和action记录
            if (account == 0) {
              let member: any = {
                account: 0,
              };
              this.itemcontext = member;
              return;
            }
            let member: any = {
              account: response.data.assignedto,
              realname: response.data.assignedto,
            };
            for (let i = 0; i < this.userslist.length; i++) {
              let realname = this.userslist[i].label;
              let value = this.userslist[i].value;
              if (Object.is(value, account)) {
                Object.assign(member, { account: this.userslist[i].value });
                Object.assign(member, { realname: this.userslist[i].label });
              }
            }
            this.itemcontext = member;
            this.$emit("updateTaskStatus", response.data.id);
          }
        })
        .catch((response) => {
          this.$Notice.error({ title: "错误", desc: response.data.detail });
          reject(response);
        });
    });
  }
}
</script>

<style lang="less">
@import "./app-tasklist-avatar.less";
</style>
